<template>
  <div class="maoyan-container">
    <div
      class="index-nav-container undefined"
      style="background: linear-gradient(to right, rgb(250, 60, 104) 2%, rgb(254, 70, 77) 97%) rgb(250, 60, 104);"
    >
      <ul class="clearfix ">
        <li class="title nav-item mf-shang-hei-regular">
          猫眼电影
        </li>
        <li class="nav-item active">
          即将上映
        </li>
        <li class="total nav-item">
          <a
            href="https://maoyan.com/"
            data-bid="b_rbbamvz0"
            class="link"
            target="_blank"
            data-query="utm_source=meituanweb"
          ><span>全部</span><span
            class="right-arrow iconfont icon-right"
          /></a>
        </li>
      </ul>
    </div>
    <div class="scenes-body">
      <div class="hot-container" style="display: none;">
        <div>
          <div class="slider">
            <div
              class="slider-content clearfix"
              style="left: 0px; margin: 0px 12px;"
            />
            <div class="btn btn-next" style="right: 0px;">
              <i class="iconfont icon-right" />
            </div>
            <div class="btn btn-pre" style="left: 0px;">
              <i class="iconfont icon-left" />
            </div>
          </div>
          <div
            id="maoyan-page"
            class="slider-pagination"
            style="margin-left: 0px;"
          />
        </div>
      </div>
      <div class="coming-container" style="display: block;">
        <div>
          <div class="slider">
            <div
              class="slider-content clearfix"
              :style="left"
              style="margin: 0px 12px;"
            >
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1301774"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/60f85d237dc024edb46e5badfaa71c29512553.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>7215</span> 人想看</b>
                    </p>
                    <p class="film-name">错爱迷踪</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1241385"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/f52ccebd4f91402b6532f44a494713855261102.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>24769</span> 人想看</b>
                    </p>
                    <p class="film-name">秘密访客</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1233290"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/afcf5837b6f1955a2c136542c0ed9d32392283.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>961</span> 人想看</b>
                    </p>
                    <p class="film-name">无名狂</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1294417"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/582d57e86924b47279c001dca5a12adb5773823.png@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>5353</span> 人想看</b>
                    </p>
                    <p class="film-name">危险记忆</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1302405"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/81fe2197ef930c79624a28cc76c423835264620.png@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>7493</span> 人想看</b>
                    </p>
                    <p class="film-name">小公主艾薇拉与神秘王国2</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1197077"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/07e0ee6c6f30700e6d4ab6774d95fc4f108727.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>28315</span> 人想看</b>
                    </p>
                    <p class="film-name">我的初恋十八岁</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1302281"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p1.meituan.net/moviemachine/1d2b4985d0187b437d41a73994ba2e191607376.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>9488</span> 人想看</b>
                    </p>
                    <p class="film-name">奇妙王国之魔法奇缘</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1318812"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/6adbe9c365a3aaadfb65910bc279bf6a3385927.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>1237</span> 人想看</b>
                    </p>
                    <p class="film-name">沉香</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/1222268"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p0.meituan.net/movie/a19913517ec4dd7b1e8c56a199ceaa4280560.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>11663</span> 人想看</b>
                    </p>
                    <p class="film-name">天下无拐</p>
                  </div></a>
              </div>
              <div class="slider-item-film">
                <a
                  href="https://maoyan.com/films/665702"
                  data-bid="b_rbbamvz0"
                  data-lab="null"
                  class="link"
                  target="_blank"
                  data-query="utm_source=meituanweb"
                ><img
                   src="//p1.meituan.net/movie/eb37c5b78ec0c14aaad707700fcc1443390529.jpg@214w_297h_1e_1c"
                   class="image film-img"
                 ><img class="film-mark" style="display: none;">
                  <div class="film-info">
                    <p class="film-score">
                      <b><span>2271</span> 人想看</b>
                    </p>
                    <p class="film-name">恋上美人鱼</p>
                  </div></a>
              </div>
            </div>
            <div class="btn btn-next" style="right: 0px;">
              <i class="iconfont icon-right" @click="goRigth" />
            </div>
            <div class="btn btn-pre" style="left: 0px;">
              <i class="iconfont icon-left" @click="goLeft" />
            </div>
          </div>
          <div
            id="maoyan-page"
            class="slider-pagination"
            style="margin-left: 0px;"
          >
            <div class="pagination" style="opacity: 0.9;" />
            <div class="pagination" style="opacity: 0.2;" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      left: 'left: 0px;'
    }
  },
  methods: {
    goLeft () {
      this.left = 'left: 0px;'
    },
    goRigth () {
      this.left = 'left: -1165px;'
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/index/commonFile.scss'
</style>
